{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% set major_version = version.split('.')[0] %}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=wnp' ~ major_version %}

{% if LANG == 'fr' %}
  {% set footer_portions_of_this_content = "Certaines parties de ce contenu sont ©1998–2025 par les contributeurs individuels de mozilla.org. <br> Ce contenu est disponible sous <a class='wnp-footer-link' rel='license' href='/fr/foundation/licensing/website-content/'>licence Creative Commons</a>." %}
  {% set donate_cta = "Faire un don à la Fondation Mozilla" %}
  {% set signoff_heading = "Conçu par Mozilla" %}
  {% set signoff_body = "Pensé pour vous depuis 1998" %}
{% elif LANG == 'de' %}
  {% set footer_portions_of_this_content = "Teile dieses Inhalts sind ©1998–2025 von einzelnen Mitwirkenden von mozilla.org. <br> Inhalt verfügbar unter einer <a class='wnp-footer-link' rel='license' href='/de/foundation/licensing/website-content/'>Creative Commons</a> Lizenz." %}
  {% set donate_cta = "Spende an die Mozilla Foundation" %}
  {% set signoff_heading = "Powered by Mozilla" %}
  {% set signoff_body = "Für dich und das Web. Schon seit 1998." %}
{% elif LANG.startswith('en-') %}
  {% set footer_portions_of_this_content = "Portions of this content are ©1998–2025 by individual mozilla.org contributors. <br> Content available under a <a class='wnp-footer-link' rel='license' href='/en-US/foundation/licensing/website-content/'>Creative Commons license</a>." %}
  {% set donate_cta = "Donate to Mozilla Foundation" %}
  {% set signoff_heading = "Powered by Mozilla" %}
  {% set signoff_body = "Putting people before profits since 1998" %}
{% else %}
{% endif %}

<!doctype html>
<html class="windows no-js" lang="{{ LANG|replace('en-US', 'en') }}" dir="{{ DIR }}" data-country-code="{{ country_code }}" data-needs-consent="{{ needs_data_consent(country_code) }}" data-latest-firefox="{{ latest_firefox_version }}" data-esr-versions="{{ esr_firefox_versions|join(' ') }}" {% if settings.GTM_CONTAINER_ID %}data-gtm-container-id="{{ settings.GTM_CONTAINER_ID }}" {% endif %} {% if settings.STUB_ATTRIBUTION_RATE %}data-stub-attribution-rate="{{ settings.STUB_ATTRIBUTION_RATE }}" {% endif %} {% if settings.SENTRY_FRONTEND_DSN %}data-sentry-dsn="{{ settings.SENTRY_FRONTEND_DSN }}" {% endif %} {% block html_attrs %}{% endblock %}>

  <head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block extra_meta %}{% endblock %}

    <title>{% block page_title %}{{ ftl('whatsnew-page-title-v2') }} {{ major_version }}{% endblock %}</title>
    <meta name="description" content="{{ ftl('whatsnew-page-description') }}">

    {% block site_css %}
      {{ css_bundle('firefox_whatsnew_new_theme') }}
    {% endblock %}

    {# The Firefox Design System fonts files (Metropolis, Inter) come from Protocol, but we only use the font files, not Protocol CSS #}
    <link rel="preload" href="{{ static('protocol/fonts/Metropolis-Medium.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="{{ static('protocol/fonts/Metropolis-Bold.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="{{ static('protocol/fonts/Inter-Regular.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="{{ static('protocol/fonts/Inter-Bold.woff2') }}" as="font" type="font/woff2" crossorigin>

    {% block page_css %}{% endblock %}

    {{ js_bundle('site') }}
    {% block google_analytics %}
    {% if settings.GTM_CONTAINER_ID %}
    {{ js_bundle('gtm-snippet') }}
    {% endif %}
    {% endblock %}
  </head>

  <body id="{% block body_id %}firefox-whatsnew-{{ major_version }}{% endblock %}" class="html-{{ DIR }} {% block body_class %}{% endblock %}" {% block body_attrs %}{% endblock %}>

    {% block wnp_header %}
    <header class="wnp-header">
      <div class="wnp-header-inner">
        <h2 class="wnp-logo-fx">{{ ftl('whatsnew-firefox') }}</h2>
          {% if ftl_has_messages('whatsnew-update-notification') %}
          <div class="wnp-page-header-notification">
            <div class="wnp-notification-bar wnp-t-success">
              <p>{{ ftl('whatsnew-update-notification') }}</p>
            </div>
          </div>
          {% endif %}
        {# Navigation functionality built for future versions - not part of current design, but useful for debugging dark mode #}
        {% if settings.DEBUG %}
        <button class="wnp-hamburger" type="button" aria-label="{{ ftl('ui-menu') }}" data-label-closed="{{ ftl('ui-menu') }}" data-label-open="{{ ftl('ui-close') }}" aria-controls="wnp-nav" aria-expanded="false" aria-haspopup="true">
          <span aria-hidden="true"></span>
        </button>
        <nav id="wnp-nav" class="wnp-nav" aria-label="Primary">
          <ul class="wnp-nav-menu">
            <li><a class="wnp-nav-link wnp-nav-link-active" href="#">What’s New</a></li>
            <li><a class="wnp-nav-link" href="https://www.firefox.com/releases/">Archive</a></li>
            <li><a class="wnp-nav-link" href="https://www.firefox.com/firefox/{{ version }}/releasenotes/">Release Notes</a></li>
          </ul>
          <div class="wnp-theme-toggle" role="group" aria-label="Themes">
            <button type="button" class="wnp-theme-btn is-light" data-theme="light">Light Mode</button>
            <button type="button" class="wnp-theme-btn is-dark" data-theme="dark">Dark Mode</button>
          </div>
        </nav>
        <button class="wnp-nav-toggle" type="button" aria-label="Toggle Dark Mode" aria-pressed="false">
          <span>Toggle Dark Mode</span>
        </button>
        {% endif %}
      </div>
    </header>
    {% endblock %}

    <div id="outer-wrapper">
      {% block wnp_content %}
      <main class="wnp-content">
        <div class="wnp-content-inner">
          <h1>What's New in Firefox {{ major_version }}</h1>
        </div>
      </main>
      {% endblock %}

      {% block wnp_footer %}
      <footer class="wnp-footer">
        <div class="wnp-footer-inner">
          <div class="wnp-footer-top">
            <p class="wnp-footer-copy">
              {% set moco_link = 'href="%s" class="wnp-footer-link" data-link-position="footer" data-link-text="Mozilla Corporation"'|safe|format(url('mozorg.home')) %}
              {% set mofo_link = 'href="https://foundation.mozilla.org/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=wnp%s" class="wnp-footer-link" rel="external noopener" data-link-position="footer" data-link-text="Mozilla Foundation"'|safe|format(version) %}
              {{ ftl('footer-refresh-visit-mozilla-corporations-v2', fallback='footer-refresh-visit-mozilla-corporations', moco_link=moco_link, mofo_link=mofo_link) }}<br>
              {% if footer_portions_of_this_content %}
                {{ footer_portions_of_this_content | safe }}
              {% else %}
                {{ ftl('footer-refresh-portions-of-this-content', href='href="%s"'|safe|format(url('foundation.licensing.website-content')), current_year=current_year|string) }}
              {% endif %}
            </p>
            <nav class="wnp-footer-links" aria-label="Footer">
              <ul>
                <li>
                  <a class="wnp-footer-link" href="https://support.mozilla.org/{{ params }}">{{ ftl('footer-refresh-product-help') }}
                    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 13" width="12" height="12" aria-hidden="true">
                      <path d="M6.938.5v1.125h3.141L5.337 6.367l.796.795 4.742-4.742v3.143H12V.5H6.937Z" fill="currentColor"/>
                      <path d="M7.875 11.375h-6.75v-6.75H4.5V3.5H0v9h9V8H7.875v3.375Z" fill="currentColor"/>
                    </svg>
                  </a>
                </li>
                <li>
                  <a class="wnp-footer-link" href="/privacy/websites/">{{ ftl('footer-refresh-websites-privacy-notice') }}</a>
                </li>
                <li>
                  <a class="wnp-footer-link" href="/about/legal/terms/mozilla">{{ ftl('footer-refresh-websites-legal') }}</a>
                </li>
                <li>
                  <a class="wnp-footer-link" href="/privacy/websites/cookie-settings/">{{ ftl('footer-refresh-websites-cookies') }}</a>
                </li>
              </ul>
            </nav>
            <div class="wnp-footer-logo" aria-hidden="true"></div>
          </div>

          {% if signoff_heading and signoff_body %}
            <hr class="wnp-footer-divider">
            <div class="wnp-footer-bottom">
              <div class="wnp-footer-brand">
                <h3 class="wnp-footer-title">{{ signoff_heading }}</h3>
                <p class="wnp-footer-subtitle">{{ signoff_body }}</p>
              </div>
              <div class="wnp-footer-cta">
                <a class="wnp-button wnp-button-outline" href="https://www.mozillafoundation.org/?form=whats-new-product"><img src="/media/img/firefox/whatsnew/whatsnew142/heart_filled.svg" width="12" height="12" alt="" aria-hidden="true">{{ donate_cta }}</a>
              </div>
            </div>
          {% endif%}
        </div>
      </footer>
      {% endblock %}
    </div>

    {% block site_js %}
    {{ js_bundle('lib') }}
    {{ js_bundle('data') }}
    {{ js_bundle('firefox_whatsnew_new_theme') }}
    {{ js_bundle('newsletter') }}
    {% endblock %}

    {% block js %}
    {% endblock %}
  </body>

</html>
